<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Data Tables</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">

                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <!-- form start -->
                        <form role="form" action="" id="form_submit">
                            <div class="row">
                                <div class="col-lg-2 mt-2">
                                    <div class="">
                                        <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center">
                                            <code>*</code>&nbsp;&nbsp;信息编号
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9 mt-2">
                                    <div class="form-group">
                                        <input name="code" type="text" class="form-control" id="u_id" placeholder=""
                                               disabled>
                                        <input name="nid" type="text" class="form-control" id="nid" placeholder=""
                                               style="display: none">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2 mt-2">
                                    <div class="">
                                        <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center">
                                            <code>*</code>&nbsp;&nbsp;标题
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9 mt-2">
                                    <div class="form-group">
                                        <input name="ntitle" type="text" class="form-control" id="ntitle" value="">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="">
                                        <div style="line-height: 1.5em;margin-top: 6px;" class="text-center">
                                            <code>*</code>&nbsp;&nbsp;内容
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <div class="form-group">
                                        <script name="ncontent" id="editor" type="text/plain" style="width:100%;height: 600px;"></script>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-lg-2">
                                    <div class="">
                                        <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center">
                                            <code>*</code>&nbsp;&nbsp;消息类型
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <!-- /.form-group -->
                                    <div class="form-group">
                                        <select id="nidd" name="nidd" class="form-control select2" style="width: 100%;">

                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-lg-2 mt-2">
                                    <div class="">
                                        <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center">
                                            <code>*</code>&nbsp;&nbsp;是否全员发送
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9 mt-2">
                                    <div>
                                        <div class="col-lg-3">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                            <span class="input-group-text">
                                            <input name="isall" type="checkbox">
                                            </span>
                                                </div>
                                                <label class="form-control">全员发送</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-lg-2">
                                    <div class="">
                                        <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center">
                                            <code>*</code>&nbsp;&nbsp;发送对象
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-9">
                                    <!-- /.form-group -->
                                    <div class="form-group">
                                        <select id="aid" name="aid" class="form-control select2" style="width: 100%;"
                                                multiple='multiple'>
                                        </select>
                                    </div>
                                </div>
                            </div> <button id="save" class="btn btn-primary btn-sm">发布公告</button>
                        </form>
                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    <footer class="main-footer text-center" style="margin-left: 0%;">
        <div class="d-none d-sm-block">
            <b>版本:</b> 1.0
        </div>
        <!-- 按钮触发模态框 -->
        <strong>Copyright &copy; 2014-2018 <a href="http://adminlte.io">咸阳恒源汽贸有限公司</a>.</strong>保留所有权.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!--点击删除按钮后弹出的页面-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="height: 200px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    提示
                </h4>
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">-->
                <!--&times;-->
                <!--</button> -->
            </div>
            <div class="modal-body">
                消息发布成功!
                <input id="del_id" style="display: none"/>
            </div>
            <div class="modal-footer">
                <button id="delBtn" type="submit" class="btn btn-primary" value="submit"  >确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript" charset="utf-8" src="./plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="./plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- page script -->
<script>
    $(function () {
        $("#myModal").on("hidden.bs.modal", function () {
            $('#myModal').removeData("bs.modal");
        });
        var ue = UE.getEditor('editor');
        select2fun();

        $(".col-lg-3").on("click", function () {
            var span = $(this).find("span");
            var check = $(this).find("input:checkbox");
            var ischecked = check.prop("checked");
            check.prop("checked", !ischecked);
            if (!ischecked) {
                span.css("background-color", "rgb(254, 110, 54)");
                $("#aid").select2().prop("disabled", true);
            } else {
                span.css("background-color", "#50a1f2");
                $("#aid").select2().prop("disabled", false);
                select2fun();
            }
        });


        $('#form_submit').bootstrapValidator({

            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'fa  fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            },

            fields: {
                ntitle: {
                    message: '校验失败',
                    validators: {
                        notEmpty: {
                            message: '标题不能为空'
                        }
                    }
                },
                ncontent: {
                    validators: {
                        notEmpty: {
                            message: '内容不能为空'
                        }
                    }
                },
                aid: {
                    validators: {
                        notEmpty: {
                            message: '发送对象不能为空'
                        }
                    }
                },
                nid: {
                    validators: {
                        notEmpty: {
                            message: '类型不能为空'
                        }
                    }
                }
            }

        });

        //证照属性设置保存信息
        $("#save").on("click", function SaveData() {
            $("#form_submit").bootstrapValidator('validate');//提交验证
            if ($("#form_submit").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                var data = $('#form_submit').serialize();
                //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
                var submitData = decodeURIComponent(data, true);
                //submitData是解码后的表单数据，结果同上
                var url = encodeURI("./saveNotice.action");
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            //刷新表格
                            $("#deleteModal").modal('show');  //手动关闭
                        } else {
                            //刷新表格
                            $("#deleteModal").modal('hide');  //手动关闭
                        }
                    },
                    dataType: "json"
                });
            }
        });

        $("#delBtn").on("click",function () {
           $("#nid").val("");
           $("#ntitle").val("");
           $("#ncontent").val("");
            UE.getEditor('editor').setContent("");

           $("#deleteModal").modal("hide");
        });

    });


    function select2fun() {
        $("#aid").select2({
            ajax: {
                type: 'GET',
                url: "./UserList.action",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term, // search term 请求参数 ， 请求框中输入的参数
                        page: params.page,
                        length: 10,// 每页显示多少行
                        type: 3
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象
                    var arr = data.data;
                    for (item in arr) {
                        itemList.push({id: arr[item].aid, text: arr[item].name})
                    }
                    return {
                        results: itemList,//itemList
                        pagination: {
                            more: (params.page * 10) < data.recordsTotal
                        }
                    };
                },
                cache: false
            },
            placeholder: '请选择',//默认文字提示
            language: "zh-CN",
            delay: 200,// 延迟显示
            tags: true,//允许手动添加
            allowClear: true,//允许清空
            escapeMarkup: function (markup) {
                return markup;
            }, // 自定义格式化防止xss注入
            minimumInputLength: 1,//最少输入多少个字符后开始查询
            formatResult: function formatRepo(repo) {
                return repo.text;
            }, // 函数用来渲染结果
            formatSelection: function formatRepoSelection(repo) {
                return repo.text;
            } // 函数用于呈现当前的选择
        });

        $("#nidd").select2({
            ajax: {
                type: 'GET',
                url: "./noticeTypeList.action",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term, // search term 请求参数 ， 请求框中输入的参数
                        page: params.page,
                        length: 10,// 每页显示多少行
                        type: 3
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    var itemList = [];//当数据对象不是{id:0,text:'ANTS'}这种形式的时候，可以使用类似此方法创建新的数组对象
                    var arr = data.data;
                    for (item in arr) {
                        itemList.push({id: arr[item].nid, text: arr[item].nname})
                    }
                    return {
                        results: itemList,//itemList
                        pagination: {
                            more: (params.page * 10) < data.recordsTotal
                        }
                    };
                },
                cache: false
            },
            placeholder: '请选择',//默认文字提示
            language: "zh-CN",
            delay: 200,// 延迟显示
            tags: true,//允许手动添加
            allowClear: true,//允许清空
            escapeMarkup: function (markup) {
                return markup;
            }, // 自定义格式化防止xss注入
            minimumInputLength: 1,//最少输入多少个字符后开始查询
            formatResult: function formatRepo(repo) {
                return repo.text;
            }, // 函数用来渲染结果
            formatSelection: function formatRepoSelection(repo) {
                return repo.text;
            } // 函数用于呈现当前的选择
        });
    }

</script>
</body>
</html>
